 /*
 * @description: 员工列表
 * @Author: along
 * @Date: 2021-07-09
 * @Last Modified by: along
 * @Last Modified time: 2021-07-09
 */
<template>
    <div class="container user-list-container2">
        <div class="__title">
            <p class="__title_name">员工列表</p>
        </div>
        <div class="operation-wrapper">
            <div class="filter-view">
                <div class="header-new-box">
                    <p class="header-new-box-title">
                        员工信息
                    </p>
                    <el-input
                        placeholder="请输入员工姓名/手机号码"
                        v-model="filterData.keyword"
                        suffix-icon="el-icon-search"
                        clearable
                        size="medium"
                        style="width: 240px"
                        @change="getUserList(1)"
                        @keydown.enter.native="getUserList(1)"
                    />
                </div>
                <!-- <div class="header-new-box">
                    <p class="header-new-box-title">
                        账号状态
                    </p>
                    <el-select
                        v-model="filterData.status"
                        clearable
                        filterable
                        placeholder="请选择"
                        size="small"
                        @change="getUserList(1)"
                    >
                        <el-option
                            v-for="item in statusList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div> -->
            </div>
            <el-button
                type="primary"
                size="small"
                :disabled="!authResult.auth_add"
                @click="editDialogVisble = true">新增员工</el-button>
        </div>
        <div class="content-wrapper">
            <el-table
                :data="userList"
                style="width: 100%">
                <el-table-column
                    prop="username"
                    label="用户名"/>
                <el-table-column
                    prop="true_name"
                    label="员工姓名">
                    <template slot-scope="scope">
                        {{ scope.row.true_name || '--' }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="phone"
                    label="手机号">
                    <template slot-scope="scope">
                        {{ scope.row.phone || '--' }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="position_name"
                    label="岗位名称"
                >
                    <template slot-scope="scope">
                        {{ scope.row.position_name ? scope.row.position_name : '--' }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="department_name"
                    label="所属部门"
                >
                    <template slot-scope="scope">
                        {{ scope.row.department_name ? scope.row.department_name : '--' }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="状态">
                    <template slot-scope="scope">
                        <el-switch
                            v-model="scope.row.status"
                            :disabled="!authResult.auth_status"
                            :active-value="1"
                            :inactive-value="0"
                            @change="handleUserStatusChange($event, scope.row.user_no)"/>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="remark"
                    label="备注"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{ scope.row.remark || '--' }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    :width="200"
                    fixed="right"
                >
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            :disabled="!authResult.auth_edit"
                            @click="handleEditUser(scope.row)">编辑</el-button>
                        <el-button
                            type="text"
                            :disabled="!authResult.auth_view_group || scope.row.is_admin == 1 ? true : false"
                            @click="handleSetGroup(scope.row)">设置用户组</el-button>
                        <el-button
                            type="text"
                            :disabled="!authResult.auth_delete"
                            :style="{color: 'rgba(249, 91, 86, 1)'}"
                            @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <div
            class="pagination-wrapper clearfix"
            v-if="userList.length > 0"
        >
            <el-pagination
                background
                layout="total, prev, pager, next"
                :current-page.sync="page.now_page"
                :total="page.total_count"
                :page-size="page.page_size"
                @current-change="getUserList"
            />
        </div>
        <!-- /分页 -->
        <!-- <div class="pagination-wrapper clearfix">
            <el-pagination
                v-show="page.total_count > page.page_size"
                layout="prev, pager, next"
                :total="page.total_count"
                :page_size="page.page_size"
                @current-change="getUserList" />
        </div> -->

        <!-- 弹窗 新增/编辑 -->
        <el-dialog
            :title="editData.user_no ? '编辑' : '新增'"
            :visible.sync="editDialogVisble"
            @close="handleEditDialogClose"
            :close-on-click-modal="false"
            width="30%">
            <el-form
                ref="editForm"
                :model="editData"
                label-width="80px"
                label-position="left"
                size="small"
                :rules="editFormRules">
                <el-form-item
                    label="用户名"
                    prop="username">
                    <el-input
                        v-model.trim="editData.username"
                        placeholder="请输入用户名"
                        :readonly="editData.user_no.length > 0"/>
                </el-form-item>
                <el-form-item
                    prop="true_name"
                    label="姓名">
                    <el-input
                        v-model.trim="editData.true_name"
                        placeholder="请输入姓名"/>
                </el-form-item>
                <el-form-item
                    prop="phone"
                    label="手机号">
                    <el-input
                        v-model.number="editData.phone"
                        placeholder="请输入手机号"/>
                </el-form-item>
                <el-form-item
                    prop="password"
                    label="密码">
                    <el-input
                        v-model="editData.password"
                        :placeholder="editData.user_no.length > 0 ? '不修改密码留空即可' : '请输入密码'"/>
                </el-form-item>
                <el-form-item
                    prop="remark"
                    label="备注">
                    <el-input
                        v-model="editData.remark"
                        placeholder="请输入备注"
                        type="textarea"/>
                </el-form-item>
                <!-- <el-form-item
                    prop="remark"
                    label="岗位"
                >
                    <el-input
                        v-model="row.postion"
                        placeholder="请输入岗位名称"
                    />
                </el-form-item> -->
                <el-form-item
                    prop="remark"
                    label="岗位"
                >
                    <el-select
                        v-model="editData.department"
                        clearable
                        filterable
                        placeholder="请选择"
                        size="small"
                        :style="{width: '242px'}"
                    >
                        <el-option
                            v-for="item in departmentList"
                            :key="item.position_no"
                            :label="item.name"
                            :value="item.position_no"
                        />
                    </el-select>
                </el-form-item>
            </el-form>
            <span
                slot="footer"
                class="dialog-footer">
                <el-button
                    @click="editDialogVisble = false"
                    size="medium"
                    :style="{width: '120px', marginRight: '24px'}"
                >取 消</el-button>
                <el-button
                    type="primary"
                    size="medium"
                    :style="{width: '120px'}"
                    @click="handleResolveSubmitUser">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 弹窗 设置用户组 -->
        <el-dialog
            title="设置用户组"
            :visible.sync="setGroupDialogVisible"
            @close="handleSetGroupDialogClose"
            width="30%">
            <el-form
                ref="setGroupForm"
                :model="setGroupData"
                label-width="80px"
                label-position="left"
                size="small"
                :rules="editFormRules">
                <el-form-item
                    label="用户组"
                    prop="groups">
                    <el-select
                        v-model="setGroupData.groups"
                        multiple
                        placeholder="请选择">
                        <el-option
                            v-for="item in userGroupList"
                            :key="item.group_no"
                            :label="item.title"
                            :value="item.group_no" />
                    </el-select>
                </el-form-item>
            </el-form>
            <span
                slot="footer"
                class="dialog-footer">
                <el-button
                    @click="setGroupDialogVisible = false"
                    size="medium"
                    :style="{width: '120px', marginRight: '24px'}"
                >取 消</el-button>
                <el-button
                    type="primary"
                    :disabled="!authResult.auth_set_group"
                    size="medium"
                    :style="{width: '120px'}"
                    @click="submitSetGroup">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
const MAP = {
    username: '用户名',
    true_name: '姓名',
    phone: '手机号',
    password: '密码',
    remark: '备注'
};

export default {
    data() {
        const validate = (rule, value, callback) => {
            if (!this.editData.user_no) {
                if (!value) {
                    return callback(new Error(`${MAP[rule.field]}不能为空`));
                }
            }
            callback();
        };

        return {
            row: {
                // postion: '',
                // department: ''
            },
            departmentList: [],
            authResult: {},
            filterData: {
                keyword: '',
                status: ''
            },
            statusList: [{value: '', label: '全部'},{value: 1, label: '已启用'},{value: 0, label: '已禁用'}],
            userList: [],
            userGroupList: [],
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            editDialogVisble: false,
            editData: {
                user_no: '',
                username: '',
                true_name: '',
                phone: '',
                password: '',
                remark: '',
                department: ''
            },
            editFormRules: {
                username: [
                    { validator: validate, trigger: 'blur' }
                ],
                true_name: [
                    { validator: validate, trigger: 'blur' }
                ],
                phone: [
                    { validator: validate, trigger: 'blur' }
                ],
                password: [
                    { validator: validate, trigger: 'blur' }
                ],
                remark: [
                    { validator: validate, trigger: 'blur' }
                ]
            },
            setGroupDialogVisible: false,
            setGroupData: {
                user_no: '',
                groups: []
            }
        };
    },
    mounted() {
        this.$store.commit('SET_HEADER', [{title: '设置'},{title: '员工管理'},{title: '用户列表'}]);
        this.authResult = this.$route.meta.authResult;
        this.getUserList();

        this.$post('/__local/system%5Cdepartment_position%5Cget_simple_list',{},resp=>{
            if (resp.code == 1) {
                this.departmentList = resp.data.list;
            } else {
                this.$notify({
                    title: '提示',
                    message: resp.msg,
                    type: 'warning',
                    duration: 2000
                });
            }
        });
    },
    methods: {
        /**
         * 获取用户列表
         */
        getUserList(page) {
            this.$post('/__local/system%5Cuser%5Cget_list', {
                page_id: page || this.page.now_page,
                ...this.filterData
            }, resp => {
                if (resp.code == 1) {
                    this.userList = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * 获取用户组列表
         */
        getUserGroupList(callback) {
            this.$post('/__local/system%5Cuser_group%5Cget_list', {}, resp => {
                if (resp.code == 1) {
                    this.userGroupList = resp.data.list;
                    if (callback) {
                        callback();
                    }
                }
            });
        },

        /**
         * 获取用户所属用户组
         */
        getGroupOfUser(user_no) {
            this.$post('/__local/system%5Cuser%5Cget_user_group', {
                user_no
            }, resp => {
                if (resp.code == 1) {
                    let arr = [];

                    for (let i in resp.data.list) {
                        if (resp.data.list[i]) {
                            arr.push(resp.data.list[i].group_no);
                        }
                    }
                    this.setGroupData.groups = arr;
                }
            });
        },

        /**
         * 设置用户状态
         */
        handleUserStatusChange(status, user_no) {
            this.$post('/__local/system%5Cuser%5Cset_status', {
                user_no,
                status
            }, resp => {
                if (resp.code == 1) {
                    this.$message({
                        type: 'success',
                        message: '设置用户状态成功'
                    });
                } else {
                    this.getUserList(this.page.now_page);
                    this.$message({
                        type: 'warning',
                        messaeg: resp.msg || '设置用户状态失败'
                    });
                }
            });
        },

        /**
         * 编辑用户信息
         */
        handleEditUser(data) {
            this.editData = Object.assign({}, data);
            // this.editData = {
            //     department: data.position_no
            // };

            this.$set(this.editData, 'department', data.position_no);

            console.log('editData', this.editData);
            this.editDialogVisble = true;
        },

        /**
         * 关闭用户弹窗后处理数据
         */
        handleEditDialogClose() {
            this.editData = Object.assign({
                user_no: '',
                username: '',
                true_name: '',
                phone: '',
                password: '',
                remark: '',
                department: ''
            });
        },

        /**
         * 新增/编辑用户前处理
         */
        handleResolveSubmitUser() {
            if (this.editData.user_no) {
                this.submitEditUser();
                if (this.editData.password) {
                    this.submitEditPassword();
                }
            } else {
                this.$refs.editForm.validate().then(valid => {
                    if (valid) {
                        this.submitAddUser();
                    }
                });
            }
        },

        /**
         * 新增用户
         */
        submitAddUser() {
            let { username, true_name, phone, password, remark, department } = this.editData;

            this.$post('/__local/system%5Cuser%5Cadd', {
                username,
                true_name,
                phone,
                password,
                remark,
                position_no: department
            }, resp => {
                if (resp.code == 1) {
                    this.getUserList(this.page.now_page);
                    this.editDialogVisble = false;
                    this.$message({
                        type: 'success',
                        message: '添加用户成功'
                    });
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg || '添加用户失败'
                    });
                }
            });
        },

        /**
         * 编辑用户
         */
        submitEditUser() {
            let { user_no, username, true_name, phone, remark, department } = this.editData;

            this.$post('/__local/system%5Cuser%5Cset', {
                user_no,
                true_name,
                phone,
                remark,
                position_no: department
            }, resp => {
                if (resp.code == 1) {
                    this.getUserList(this.page.now_page);
                    this.editDialogVisble = false;
                    this.$message({
                        type: 'success',
                        message: '编辑用户成功'
                    });
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg || '编辑用户失败'
                    });
                }
            });
        },

        /**
         * 设置用户密码
         */
        submitEditPassword() {
            let { user_no, password } = this.editData;

            this.$post('/__local/system%5Cuser%5Creset_password', {
                user_no,
                password
            }, resp => {
                if (resp.code !== 1) {
                    this.$message({
                        type: 'warning',
                        message: resp.msg || '设置用户密码失败'
                    });
                }
            });
        },

        /**
         * 打开设置用户组弹窗
         */
        handleSetGroup(data) {
            if (this.userGroupList.length) {
                this.getGroupOfUser(data.user_no);
            } else {
                this.getUserGroupList(() => {
                    this.getGroupOfUser(data.user_no);
                });
            }

            this.setGroupData.user_no = data.user_no;
            this.setGroupDialogVisible = true;
        },

        /**
         * 删除用户
         */
        handleDelete (row) {
            this.$confirm('是否要删除此用户?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/__local/system%5Cuser%5Cdelete', {
                    user_no: row.user_no
                }, resp => {
                    if (resp.code == 1) {
                        this.getUserList(this.page.now_page);
                        this.$message({
                            type: 'success',
                            message: '删除成功',
                            center: true
                        });
                    } else {
                        this.$message({
                            type: 'waring',
                            message: resp.msg,
                            center: true
                        });
                    }
                });
            });
        },

        /**
         * 设置用户组弹窗关闭事件
         */
        handleSetGroupDialogClose() {
            this.setGroupData.groups = [];
            this.setGroupData.user_no = '';
        },

        /**
         * 设置用户组
         */
        submitSetGroup() {
            console.log(this.setGroupData);
            let arr = [];

            if (this.setGroupData.groups.length > 0) {
                this.setGroupData.groups.forEach(item => {
                    arr.push({
                        group_no: item
                    });
                });
            } else {
                this.$message({
                    type: 'warning',
                    message: '请选择用户所属分组'
                });
                return;
            }
            this.$post('/__local/system%5Cuser%5Cset_user_group', {
                user_no: this.setGroupData.user_no,
                data: JSON.stringify(arr)
            }, resp => {
                if (resp.code == 1) {
                    this.setGroupDialogVisible = false;
                    this.$message({
                        type: 'success',
                        message: '设置用户分组成功'
                    });
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg || '设置用户失败'
                    });
                }
            });
        }
    }
};
</script>


<style lang="less" scoped>
.container {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    margin: 12px;
    .__title {
        height: 68px;
        border-bottom: 1px rgba(240, 242, 245, 1) solid;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding-left: 36px;
        .__title_name {
            color: rgba(51, 51, 51, 1);
            font-size: 20px;
            font-weight: 500;
            position: relative;
            &::before {
                content: '';
                position: absolute;
                left: -9px;
                top: -1px;
                width: 3px;
                height: 20px;
                background: rgba(24, 144, 255, 1);
            }
        }
    }
}
.pagination-wrapper {
    // padding-top: 10px;
    padding-bottom: 17px;
    padding-right: 24px;
    .el-pagination {
        float: right;
        padding: 0;
        background-color: transparent;
    }
}
.operation-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 23px;
    background-color: #fff;
    padding-top: 24px;
}
.filter-view {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .header-new-box {
        display: flex;
        align-items: center;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        white-space: nowrap;
        margin-right: 24px;

        &-title {
            margin-right: 16px;
            white-space: nowrap;
        }
    }
}
.content-wrapper {
    flex: 1;
    margin: 24px;
    background-color: #fff;
    overflow: auto;
    margin-bottom: 0px;
}
.el-table {
    color: #000;
    .el-button--text {
        margin-left: 0;
        margin-right: 10px;
        padding: 0;
    }
}
.el-pagination {
    float: right;
    margin-top: 20px;
    padding: 0;
}
.dialog-footer {
    width: 100%;
    display: flex;
    justify-content: center;
}
</style>

<style lang="less">
.user-list-container2 {
    .el-dialog__header {
        padding-top: 10px;
        box-shadow:0 1px 0 0 rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
}
</style>
